<!-- 
        作者：dailc 
        时间：2016-05-24
        描述：使用示例 首页
   本示例中,css一律采用link方式手动引入,js除了sea.js意外,全部动态引入
  所有框架的工具类,统一使用别名方式引用
  注意:不要重新再次定义base,要不然会有冲突
-->
<!DOCTYPE html >
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<!--之所以在头部引入了js,是因为这个js是一个全局配置文件,通过这个js动态写入的js和css可以用来控制缓存是否过期
			一般情况下,如果要考虑缓存,都要这么使用
			下面那个通过write写入配置文件,保证每次配置文件都是最新的
		-->
		<script>
			document.write("<script type='text/javascript' src='../js/core/RayApp/cacheControl.config.js?" + Math.random() + "'></scr" + "ipt>");
		</script>
		<script>
			SrcBoot.output([
				'css/mui.min.css',
				'css/mui.picker.min.css',
				'css/common/common.css',
				'css/common/common_list.css',
				'css/iconfont.css',
				'css/index.css'
			]);
		</script>
		<style>
			.mui-table-view {
				margin-bottom: 51px;
			}
			.small-title{
				font-size: 8px;
				color: black;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell{
				padding-left: 0px;
				padding-right: 0px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .big-title{
				font-size: 13px;
				color: black;
			}
			
			.home-icon{
				width: 42px;
				height: 37px;
			}
			
			.me-icon{
				width: auto;
				height: 18px
			}
		</style>
	</head>

	<body>
		<!-- 标题 -->
		<header id="header" class="mui-bar mui-bar-nav bg-blue">
			<h1 id="title" class="mui-title">RayApp使用示例</h1>
			<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right"></a>
		</header>
		<div id="aaa" class="mui-content">
			<div id="home" class="mui-control-content mui-active homepage-fullscreen">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">共享学车</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<label id="home_login" class="mui-pull-right" style="color:black;text-align: center;height: 44px;display: none;line-height: 44px;overflow: hidden;">登录</label>
				</header>
				<div class="mui-scroll-wrapper" style="top:41px">
					<div class="mui-scroll">
						<div id="gallerySlider">
						</div>
						<div id="home_about" style="display:flex;background: white;margin: 10px;border-radius: 5px;">
							<img style="height: 80px;margin-left: 5px;" src="../img/192x192.png" />
							<div style="display:flex;margin-left: 10px;flex-direction: column;justify-content: center;">
								<p style="text-align:left;font-size: 15px;color: orange;margin-bottom: 0px;">关于我们</p>
								<p style="font-size: 12px;color: black;margin-bottom: 0px;">一个可以随时随地，由我做主的学车新模式</p>
							</div>
						</div>
						<ul class="mui-table-view mui-grid-view mui-grid-9" style="background: white;">
						<li id="home_chuantong_apply" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						    <a href="#">
						        <img class="home-icon" src="../img/home/homepage/home_ctxc.png" />
						        <div class="mui-media-body big-title">传统学车</div>
						        <p class="small-title">品牌驾校，一次性缴费</p>
						    </a>
						</li>
						<li id="home_train" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						    <a href="#">
						        <img class="home-icon" src="../img/home/homepage/home_gxxc.png" />
						        <div class="mui-media-body big-title">共享学车</div>
						        <p class="small-title">计时收费，共享场地</p>
						    </a>
						</li>
						<li id="home_order_study" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						    <a href="#">
						        <img class="home-icon" src="../img/home/homepage/home_yyxc.png" />
						        <div class="mui-media-body big-title">预约学车</div>
						        <p class="small-title">自主便捷，自由预约</p>
						    </a>
						</li>
						<li id="home_find_place" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						    <a href="#">
						        <img class="home-icon" src="../img/home/homepage/home_zcd.png" />
						        <div class="mui-media-body big-title">找场地</div>
						        <p class="small-title">随时随地，自主查找</p>
						    </a>
						</li>
						<li id="home_find_coach" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						    <a href="#">
						        <img class="home-icon" src="../img/home/homepage/home_zjl.png" />
						        <div class="mui-media-body big-title">找教练</div>
						        <p class="small-title">星级评价，调好教练</p>
						    </a>
						</li>
						<li id="home_moni" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						    <a href="#">
						        <img class="home-icon" src="../img/home/homepage/home_mnks.png" />
						        <div class="mui-media-body big-title">模拟考试</div>
						        <p class="small-title">理论模拟考试</p>
						    </a>
						</li>
						    </ul>
						
					</div>
				</div>

			</div>
			<div id="phone" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">客服电话</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<!--<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>-->
				</header>
				<div>
					<img src="../img/home/phone_header.png" width="100%" />
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" width="73px" src="../img/home/phone_service.png">
							<div class="mui-media-body">
								<p>客服1</p>
								<p class='mui-ellipsis'>电话 : 15980962033 <img src="../img/home/phone_icon.png" width="20px" align="right" /></p>
								<p class='mui-ellipsis'>QQ : 122259675 <img src="../img/home/qq_icon.png" width="20px" align="right" /></p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" width="73px" src="../img/home/phone_service.png">
							<div class="mui-media-body">
								<p>客服2</p>
								<p class='mui-ellipsis'>电话 : 13959080523 <img src="../img/home/phone_icon.png" width="20px" align="right" /></p>
								<p class='mui-ellipsis'>QQ : 122259675 <img src="../img/home/qq_icon.png" width="20px" align="right" /></p>
							</div>
						</a>
					</li>
				</ul>

			</div>
			<div id="exam" class="mui-control-content" style="padding-left: 10px;padding-right: 10px;">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">预约考试</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<!--<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>-->
				</header>
				<div>
					<div class="exam-div">
						<img src="../img/exam/car.png" class="exam-img" />
						<p class="exam-p">科目选择</p>
					</div>
					<select id="exam_ddlCourse">
						<option value="Course1">科一</option>
						<option value="Course2">科二</option>
						<option value="Course3">科三</option>
						<option value="Course4">科四</option>
					</select>
				</div>
				<div>
					<div class="exam-div">
						<img src="../img/exam/p.png" class="exam-img" />
						<p class="exam-p">场地选择</p>
						<button id="place_reload" type="button" class="mui-btn mui-btn-yellow" style="margin-left: 20px;display: none;">点击刷新</button>
					</div>
					<select id="exam_ddlPlace">
					</select>
				</div>
				<div>
					<div class="exam-div">
						<img src="../img/exam/teacher.png" class="exam-img" />
						<p class="exam-p">教练选择</p>
					</div>
					<select id="exam_ddlCoach">
					</select>
				</div>
				<button id="exam_btnSubmit" type="button" class="mui-btn mui-btn-danger mui-btn-block">提交</button>
			</div>
			<div id="me" class="mui-control-content" style="background: white;margin-bottom: 44px;">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">共享学车</h1>
					<img class="homepage-logo" src="../img/logo.png" />
					<!--<label class="mui-icon mui-icon-chat mui-pull-right" style="color:gray"></label>-->
				</header>
				<p id="username" style="text-align: center;padding-top: 15px;">用户名:---</p>
				<p id="city" style="text-align: center;">城市:---</p>
				<div style="height: 1px;background: lightgray;" >
				</div>
				<ul class="mui-table-view mui-grid-view mui-grid-9 me-link-to" style="background: white;">
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="">
				    <a href="#">
				        <img src="../img/home/me/me_wybm.png" class="me-icon"/>
				        <div class="mui-media-body">我要报名</div>
				    </a>
				</li>-->
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="">
				    <a href="#">
				        <img src="../img/home/me/me_wdzh.png" class="me-icon"/>
				        <div class="mui-media-body">我的账户</div>
				    </a>
				</li>-->
				<li id="order_manage" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./order/order_list.html">
				    <a href="#">
				        <img src="../img/home/me/me_ddgl.png" class="me-icon"/>
				        <div class="mui-media-body">报名订单</div>
				    </a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./train/train_history.html">
				    <a href="#">
				        <img src="../img/home/me/me_xstj.png" class="me-icon"/>
				        <div class="mui-media-body">学时订单</div>
				    </a>
				</li>
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="">
				    <a href="#">
				        <img src="../img/home/me/me_wylc.png" class="me-icon"/>
				        <div class="mui-media-body">我要练车</div>
				    </a>
				</li>-->
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="">
				    <a href="#">
				        <img src="../img/home/me/me_yyks.png" class="me-icon"/>
				        <div class="mui-media-body">预约考试</div>
				    </a>
				</li>-->
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./apply/apply_history.html">
				    <a href="#">
				        <img src="../img/home/practice_list.png" class="me-icon"/>
				        <div class="mui-media-body">报名记录</div>
				    </a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./learnPort/learn_port_current.html">
				    <a href="#">
				        <img src="../img/home/me/me_xcda.png" class="me-icon"/>
				        <div class="mui-media-body">学车档案</div>
				    </a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./school/order_study_record.html">
				    <a href="#">
				        <img src="../img/home/me/me_pjgl.png" class="me-icon"/>
				        <div class="mui-media-body">评价管理</div>
				    </a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./exam/exam_history.html">
				    <a href="#">
				        <img src="../img/home/exam_list.png" class="me-icon"/>
				        <div class="mui-media-body">考试列表</div>
				    </a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./school/new_note.html">
				    <a href="#">
				        <img src="../img/home/me/me_sxsl.png" class="me-icon"/>
				        <div class="mui-media-body">新手上路</div>
				    </a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./school/record.html">
				    <a href="#">
				        <img src="../img/home/practice_list.png" class="me-icon"/>
				        <div class="mui-media-body">练车记录</div>
				    </a>
				</li>
				<li id="order_manage" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" link-url="./exam/exam_retry_orderlist.html">
				    <a href="#">
				        <img src="../img/home/me/me_ddgl.png" class="me-icon"/>
				        <div class="mui-media-body">补考订单</div>
				    </a>
				</li>
				    </ul>
				    
				<div class="change" style="padding-left: 10px;padding-right: 10px;padding-bottom: 10px;">
					<button id="change" type="button" class="mui-btn mui-btn-yellow mui-btn-block" style="margin-top: 20px;">修改密码</button>
				</div>
				
				<div class="change" style="padding-left: 10px;padding-right: 10px;padding-bottom: 10px;">
					<button id="exit" type="button" class="mui-btn mui-btn-yellow mui-btn-block" style="margin-top: 20px;">退出登录</button>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#home" data="home">
				<span class="mui-icon iconfont icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#phone" data="phone">
				<span class="mui-icon iconfont icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item" href="#exam">
				<span class="mui-icon iconfont icon-exam"></span>
				<span class="mui-tab-label">考试</span>
			</a>
			<a class="mui-tab-item" href="#me">
				<span class="mui-icon iconfont icon-me"></span>
				<span class="mui-tab-label">个人</span>
			</a>
		</nav>
	</body>
	<!-- 通用js,sea.min和sea.config基本是不会变的,所以可以不用考虑缓存
		这里演示如果需要手动写入应该是一个怎么样的形式
		首先必须用两个script标签,这样才能确保在第二个标签里面的 seajs 可以适应
		正常情况下,这两个脚本应该是正常的script标签引用,不必考虑缓存问题
		可以试下使下面注释的内容生效,并将下面两个script标签引入内容注释
	-->
	<!--<script src="../js/core/sea.min.js"></script>
	<script src="../js/core/RayApp/sea.config.js" ></script>-->
	<script>
		SrcBoot.outSeaConfig();
	</script>
	<script>
		seajs.use('js/bizlogic/index.js');
	</script>

</html>